32. Warsztaty backendu cz.1

Wyzwania:

  • stworzysz frontową część projektu,
  • powtórzysz zagadnienia z zakresu Reacta,
  • przygotujesz się do samodzielnego tworzenia full-stackowej aplikacji.

Wstęp

Tym razem w czasie warsztatów wykonamy aplikację full-stackową, czyli zawierającą zarówno frontend, jak i backend. Zaczniemy od frontendu, czyli powtórki z Reacta, Reduksa, etc.

32.1. Specyfikacja projektu

Naszym celem będzie stworzenie prostej tablicy ogłoszeń. Zarejestrowani użytkownicy będą mogli zamieszczać publicznie dostępne ogłoszenia.

Każde ogłoszenie musi zawierać:

  • tytuł – min. 10 znaków,
  • treść – min. 20 znaków,
  • datę publikacji,
  • datę ostatniej aktualizacji,
  • email autora – poprawny adres email,
  • status – może to być: draft (szkic), published (opublikowane), oraz closed (zamknięte).

Ponadto, ogłoszenie może zawierać również:

  • zdjęcie,
  • cenę,
  • numer telefonu,
  • lokalizację, której dotyczy.

Na stronie głównej naszej aplikacji będą wyświetlone tytuły ogłoszeń w kolejności chronologicznej. Każdy tytuł będzie linkiem do podstrony zawierającej szczegóły ogłoszenia.

Zalogowani użytkownicy dodatkowo będą mieli:

  • dostęp do podstrony z listą swoich ogłoszeń,
  • dostęp do podstrony służącej do dodawania nowego ogłoszenia,
  • na podstronie ogłoszenia, link do edycji ogłoszenia.

Ponadto, administratorzy serwisu będą mieli możliwość edycji wszystkich ogłoszeń – nie tylko swoich.

Zarówno użytkownicy, jak i administratorzy strony będą dodawani przez właściciela aplikacji za pomocą panelu Auth0. Z tego względu nie musimy przejmować się formularzem rejestracji ani zarządzaniem użytkownikami.

Ten projekt może wydawać się stosunkowo mało złożony, ale w ciągu warsztatów musimy zbudować zarówno frontend, jak i backend aplikacji. Oczywiście, będzie mógł też posłużyć Ci za punkt wyjścia do rozbudowy o kolejne funkcjonalności.

Jeśli masz wątpliwości do powyższego materiału, to - zanim zatwierdzisz - zapytaj na czacie :)

32.2. Inicjowanie części frontendowej

Zaczynamy od powtórki z zakresu inicjowania projektu frontendowego. Tym razem jednak zastosujemy kilka praktyk i narzędzi, z którymi jeszcze się nie spotkaliśmy. Pozwoli nam to przyspieszyć prace nad aplikacją.

Oprócz wspomnianej instrukcji inicjowania projektu, możesz pobrać również gotowy, zainicjowany projekt, który otrzymujemy na końcu powyższego filmu.

Pobierz pliki projektu

Jeśli masz wątpliwości do powyższego materiału, to - zanim zatwierdzisz - zapytaj na czacie :)

32.3. Stworzenie widoków

W tej części warsztatów Twoim zadaniem jest implementacja wszystkich widoków aplikacji.

Zadanie: gotowy frontend

Do wykonania są następujące widoki:

  • MainLayout:
    • główny układ strony,
  • Header:
    • dla niezalogowanych – link do logowania za pomocą Auth0,
    • dla zalogowanych – link do listy własnych ogłoszeń oraz link do wylogowania,
  • Homepage:
    • dla zalogowanych – link do dodawania nowego ogłoszenia,
    • lista ogłoszeń, zawierająca co najmniej tytuły ogłoszeń,
  • Post:
    • podstrona pojedynczego ogłoszenia, zawierająca wszystkie informacje,
    • dla zalogowanego użytkownika, jeśli jest autorem tego ogłoszenia lub administratorem – link do edycji ogłoszenia,
  • PostEdit:
    • dla zalogowanego użytkownika, jeśli jest autorem tego ogłoszenia lub administratorem – widok umożliwiający edycję ogłoszenia,
  • PostAdd:
    • dla zalogowanego użytkownika – możliwość dodawania nowego ogłoszenia,
  • NotFound:
    • informacja o nieznalezieniu strony i link do strony głównej.

Uwagi

  • Jeśli odwiedzający stronę spróbuje wejść na stronę z ograniczonym dostępem, powinien zobaczyć zawartość widoku NotFound,
    • np. niezalogowany próbujący dodać ogłoszenie,
    • np. zalogowany próbujący edytować nie swoje ogłoszenie.
  • Informacje na temat użytkownika (czy jest zalogowany i jaki jest jego adres email) będą docelowo dostarczane przez backend,
    • na etapie prac nad frontendem mogą to być informacje wpisane na stałe w initialState.js,
    • opcjonalnie, dla ułatwienia testów, możesz w nagłówku strony dodać <select> służący do przełączania się pomiędzy użytkownikiem niezalogowanym, użytkownikami zalogowanymi, oraz administratorem.
  • Link do logowania za pośrednictwem Auth0 może na razie prowadzić do https://google.com,
    • docelowo będzie prowadził pod adres obsługiwany przez nasz backend.
Podgląd zadania

32.4. Podsumowanie

Po ukończeniu tego tygodnia warsztatów powinniśmy mieć gotową aplikację frontendową. Jest ona w pełni funkcjonalna w zakresie odczytywania i zmian w reduksowym stanie aplikacji. Do pełnej funkcjonalności brakuje jej już tylko połączenia z backendem, które zastąpi dane zawarte w initialState.js.

Jeśli ta część projektu poszła Ci sprawnie, możesz samodzielnie rozpocząć prace nad częścią backendową, zaczynając od przygotowania jej specyfikacji. Będzie to API wykorzystujące Expressa i MongoDB oraz obsługujące autoryzację opartą o Auth0.

Powodzenia!

Jeśli masz wątpliwości do powyższego materiału, to - zanim zatwierdzisz - zapytaj na czacie :)
;